﻿@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    .cover-uploader {
      border-color: #00B19D;
    }
    .cover-uploader {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 120px;
    }
    .cover-uploader:hover {
      border-color: #409EFF;
    }
    .cover-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }
    .cover {
      width: 120px;
      height: 120px;
      display: block;
    }
    .el-icon-picture-outline {
      font-size: 22px;
      margin: 100px 0;
      color: #c0c4cc;
    }

    .thumb {
      padding: 10px;
    }
    .thumb .cover {
      cursor: pointer; 
      position: relative; 
      height:150px; 
      width: 100%;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-color: #f6f8f9;
    }

    .thumb .cover .text {
      position: absolute;
      bottom: 0;
      text-align: center;
      display: block;
      width: 226px;
      color: #fff;
      padding: 6px;
      background-color: #999;;
    }

    .list {
      padding: 10px;
      cursor: pointer;
    }
    .thumb:hover, .active, .list:hover {
      background: rgb(225, 243, 216);
    }
    .list .text {
      font-size: 14px;
      height: 38px;
      overflow: hidden;
    }
    .el-card__body {
      padding: 10px;
    }
    .el-tab-pane {
      min-height: 220px;
    }
    .icon-wrapper {
      text-align: center; padding: 45px 0;
    }
    .icon-wrapper div {
      display: inline-block;
      width: 130px;
      color: #9a9a9a;
      vertical-align: top;
    }
    .icon-wrapper div:hover {
      background-color: #f1f1f1;
    }
    .icon-wrapper a {
      display: block;
      height: 100%;
      padding-top: 28px;
      padding-bottom: 34px;
      box-sizing: border-box;
      text-decoration: none;
    }
    .icon-wrapper i {
      display: inline-block;
      font-size: 30px;
      width: 40px;
      height: 40px;
    }
    .icon-wrapper strong {
      font-weight: normal;
      display: block;
      font-size: 14px;
    }
    .el-alert .el-link.el-link--primary {
        color: #00b19d;
        margin-top: -4px;
        font-size: 13px;
    }
  </style>
}

<div v-if="sended">
  <div role="alert" class="el-alert el-alert--success is-light" style="padding: 30px">
    <div class="el-alert__content">
      <p class="el-alert__description" style="font-size: 14px;">恭喜，消息群发成功</p>
    </div>
  </div>
</div>
<div v-else>
  <el-tabs type="border-card" v-model="form.materialType" v-on:tab-click="btnTabClick">
    <el-tab-pane name="Message">
      <span slot="label"><i class="el-icon-notebook-2"></i> 图文消息</span>
      
      <div v-if="form.materialId && message">
        <el-card shadow="never" style="width: 25%; margin-left: 25px; margin-right: 5px; display: inline-block">
          <template v-for="(item, index) in message.items" :key="index">
            <div v-if="index === 0" class="thumb">
              <div class="cover" :style="{backgroundImage: 'url(' + item.thumbUrl + ')'}">
                <div class="text">{{(item.title || '标题')}}</div>
              </div>
            </div>
        
            <div v-else class="list">
              <el-row>
                <el-col span="18">
                  <div class="text">{{item.title}} {{item.index}}</div>
                </el-col>
                <el-col span="6">
                  <el-image 
                    fit="cover"
                    style="width: 55px; height: 55px"
                    :src="item.thumbUrl">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" style="margin: 0px; font-size: 36px; color: #999; background: #fff; padding: 5px;"></i>
                    </div>
                  </el-image>
                </el-col>
              </el-row>
            </div>
            
            <el-divider></el-divider>
          </template>
        
        </el-card>
        <el-link :underline="false" type="primary" v-on:click="btnRemoveClick">删除</el-link>
      </div>
      <div v-else class="icon-wrapper">
        <div>
          <el-link :underline="false" type="primary" v-on:click="btnSelectClick">
            <i class="el-icon-folder"></i>
            <strong>从素材库选择</strong>
          </el-link>
        </div>
        <div>
          <el-link :underline="false" type="primary" v-on:click="">
            <i class="el-icon-tickets"></i>
            <strong>从内容中选择</strong>
          </el-link>
        </div>
      </div>
  
    </el-tab-pane>
    <el-tab-pane name="Text">
      <span slot="label"><i class="el-icon-chat-line-round"></i> 文字</span>

      <div id="text1"></div>
      <div class="editor__text" id="text2"></div>
      
    </el-tab-pane>
    <el-tab-pane name="Image">
      <span slot="label"><i class="el-icon-picture"></i> 图片</span>

      <div v-if="form.materialId && image">
        <el-card shadow="never" style="width: 25%; margin-left: 25px; margin-right: 5px; display: inline-block">
          <el-image 
            style="width: 100%; min-height: 220px; max-height:220px;"
            :src="image.url">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
  
          <div style="padding: 14px;">
            <div style="cursor: pointer; height: 22px; font-size: 14px; overflow: hidden;">
              {{ image.title }}
            </div>
          </div>
        </el-card>
        <el-link :underline="false" type="primary" v-on:click="btnRemoveClick">删除</el-link>
      </div>
      <div v-else class="icon-wrapper">
        <div>
          <el-link :underline="false" type="primary" v-on:click="btnSelectClick">
            <i class="el-icon-folder"></i>
            <strong>从素材库选择</strong>
          </el-link>
        </div>
        <div>
          
          <el-upload
            :action="getUploadUrl()"
            :headers="{Authorization: 'Bearer ' + $token}"
            :on-progress="uploadProgress"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :multiple="true"
            :show-file-list="false">
            <el-link :underline="false" type="primary">
              <i class="el-icon-upload"></i>
              <strong>上传图片</strong>
            </el-link>
          </el-upload>

        </div>
      </div>
      
    </el-tab-pane>
    <el-tab-pane name="Audio">
      <span slot="label"><i class="el-icon-headset"></i> 音频</span>

      <div v-if="form.materialId && audio">
        <el-card shadow="never" style="width: 25%; margin-left: 25px; margin-right: 5px; display: inline-block">  
          <div style="padding: 14px;">
            <div style="cursor: pointer; height: 22px; font-size: 14px; overflow: hidden;">
              {{ audio.title }}
            </div>
          </div>
        </el-card>
        <el-link :underline="false" type="primary" v-on:click="btnRemoveClick">删除</el-link>
      </div>
      <div v-else class="icon-wrapper">
        <div>
          <el-link :underline="false" type="primary" v-on:click="btnSelectClick">
            <i class="el-icon-folder"></i>
            <strong>从素材库选择</strong>
          </el-link>
        </div>
        <div>
          
          <el-upload
            :action="getUploadUrl()"
            :headers="{Authorization: 'Bearer ' + $token}"
            :on-progress="uploadProgress"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :multiple="true"
            :show-file-list="false">
            <el-link :underline="false" type="primary">
              <i class="el-icon-upload"></i>
              <strong>上传音频</strong>
            </el-link>
          </el-upload>

        </div>
      </div>
  
    </el-tab-pane>
    <el-tab-pane name="Video">
      <span slot="label"><i class="el-icon-video-play"></i> 视频</span>

      <div v-if="form.materialId && video">
        <el-card shadow="never" style="width: 25%; margin-left: 25px; margin-right: 5px; display: inline-block">  
          <div style="padding: 14px;">
            <div style="cursor: pointer; height: 22px; font-size: 14px; overflow: hidden;">
              {{ video.title }}
            </div>
          </div>
        </el-card>
        <el-link :underline="false" type="primary" v-on:click="btnRemoveClick">删除</el-link>
      </div>
      <div v-else class="icon-wrapper">
        <div>
          <el-link :underline="false" type="primary" v-on:click="btnSelectClick">
            <i class="el-icon-folder"></i>
            <strong>从素材库选择</strong>
          </el-link>
        </div>
        <div>
          
          <el-upload
            :action="getUploadUrl()"
            :headers="{Authorization: 'Bearer ' + $token}"
            :on-progress="uploadProgress"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :multiple="true"
            :show-file-list="false">
            <el-link :underline="false" type="primary">
              <i class="el-icon-upload"></i>
              <strong>上传视频</strong>
            </el-link>
          </el-upload>

        </div>
      </div>
  
    </el-tab-pane>
  </el-tabs>
  
  <div style="height: 25px"></div>
  
  <el-form v-on:submit.native.prevent ref="form" :inline="true" status-icon :model="form" size="small">
    <el-form-item label="发送时间">
      <el-select v-model="form.isTiming" v-on:change="loadTiming" placeholder="请选择">
        <el-option label="立即发送" :value="false"></el-option>
        <el-option label="定时发送" :value="true"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="form.isTiming">
      <el-select v-model="form.isToday" v-on:change="loadTiming" placeholder="请选择" style="width: 100px">
        <el-option label="今天" :value="true"></el-option>
        <el-option label="明天" :value="false"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="form.isTiming">
      <el-select v-model="form.hour" v-on:change="loadTiming" placeholder="请选择" style="width: 100px">
        <el-option
          v-for="hour in hours"
          :key="hour.value"
          :label="hour.label"
          :value="hour.value">
        </el-option>
      </el-select>
      时
    </el-form-item>
    <el-form-item v-if="form.isTiming">
      <el-select v-model="form.minute" placeholder="请选择" style="width: 100px">
        <el-option
          v-for="minute in minutes"
          :key="minute.value"
          :label="minute.label"
          :value="minute.value">
        </el-option>
      </el-select>
      分
    </el-form-item>
  </el-form>
  
  <el-divider></el-divider>
  
  <el-row align="center" style="text-align: center; padding-top:10px">
    <el-button size="small" v-on:click="btnPreviewClick" type="default">预 览</el-button>
    <el-button size="small" v-on:click="btnSubmitClick" type="primary">群 发</el-button>
  </el-row>
  
  <el-dialog
    title="发送预览"
    :visible.sync="previewDialog"
    width="60%"
    center>
  
    <el-form v-on:submit.native.prevent ref="previewForm" :model="previewForm" label-position="top" size="small">
      <el-form-item label="微信号(关注公众号后，才能接收图文消息预览)" prop="wxNames" :rules="{ required: true, message: '请输入微信号' }">
        <el-input
          type="textarea"
          :rows="wxNamesCount"
          v-model="previewForm.wxNames"
          placeholder="可输入多个微信号，按回车键分割"></el-input>
      </el-form-item>
    </el-form>
    <div class="tips">预览功能仅用于公众号查看文章效果，不适用于公众传播，预览链接会在短期内失效</div>
  
    <span slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" v-on:click="btnPreviewSubmitClick">确 定</el-button>
      <el-button size="small" v-on:click="previewDialog = false">取 消</el-button>
    </span>
  </el-dialog>

</div>

@section Scripts{
  <script src="/sitefiles/assets/lib/wangEditor/wangEditor.min.js" type="text/javascript"></script>
  <script src="/sitefiles/assets/js/admin/wx/send.js" type="text/javascript"></script>
}